<script setup lang="ts" name="EditRuler">
import usePublic from './hooks/usePublic'
import useResetDraw from './hooks/useResetDraw'
import useCanvasBox from './hooks/useCanvasBox'
import useScrollEvent from './hooks/useScrollEvent'
import useDragCanvas from './hooks/useDragCanvas'
import useWatch from './hooks/useWatch'
import useCanvasCenter from './hooks/useCanvasCenter'
import useAuxiliaryLines from './hooks/useAuxiliaryLines'
import useMouseWheel from './hooks/useMouseWheel'
import useKeyboardEvent from './hooks/useKeyboardEvent'
import SketchRuler from '@/designer/Common/components/SketchRuler/index.vue'
import { useDesignerStore } from '@/store/bigScreen/designerStore'
import { storeToRefs } from 'pinia'
import { templateRef, useResizeObserver, useDebounceFn } from '@vueuse/core'
import { MenuEnum } from '@/designer/Common/enums/editPageEnum'

const designStore = useDesignerStore()

const { editCanvas, editCanvasConfig } = storeToRefs(designStore)
const { computedScale } = designStore

const designerRef = ref(null)
const containerRef = ref(null)
const canvasRef = ref(null)

const { isResetDraw, startX, startY, isPressSpace, cursorStyle } = usePublic()
const { resetDraw } = useResetDraw(isResetDraw)
const { canvasBox } = useCanvasBox()
const { handleScroll } = useScrollEvent(startX, startY, designerRef, canvasRef)
const { dragCanvas } = useDragCanvas(designerRef, isPressSpace)
const { canvasCenter } = useCanvasCenter(designerRef, containerRef, canvasBox)
const { handleWheel } = useMouseWheel()
const { handleCornerClick, linesChangeHandle } = useAuxiliaryLines()
useWatch(isPressSpace, cursorStyle, resetDraw, handleScroll, canvasCenter)
useKeyboardEvent(isPressSpace)

const resizeCoreDom = templateRef<HTMLElement | null>('resizeCoreDom', null)
// 监听元素尺寸变化
useResizeObserver(
  resizeCoreDom,
  useDebounceFn(() => {
    resetDraw()
  }, 200)
)

onMounted(() => {
  nextTick(() => {
    if (designerRef.value) {
      computedScale(MenuEnum.ZOOM_DEFAULT)
      setTimeout(() => {
        canvasCenter()
      }, 100)
    }
  })
})
</script>

<template>
  <div ref="resizeCoreDom" class="ck-sketch-ruler">
    <SketchRuler
      v-if="isResetDraw"
      :thick="editCanvas.thick"
      :shadow="editCanvas.shadow"
      :scale="editCanvas.scale"
      :width="canvasBox().width"
      :height="canvasBox().height"
      :startX="startX"
      :startY="startY"
      :lines="editCanvasConfig.auxiliaryLines.lines"
      :isShowRuler="editCanvas.isRulerShow"
      :isShowReferLine="editCanvasConfig.auxiliaryLines.isShowReferLine"
      @onCornerClick="handleCornerClick"
      @onLinesUpdate="linesChangeHandle"></SketchRuler>
    <div ref="designerRef" class="scroll-canvas" :style="{ left: editCanvas.isRulerShow ? editCanvas.thick + 'px' : 0, top: editCanvas.isRulerShow ? editCanvas.thick + 'px' : 0 }" @wheel="handleWheel" @scroll="handleScroll">
      <div ref="containerRef" class="real-canvas-container" :style="{ width: editCanvasConfig.width * editCanvas.scale * 2.5 + 'px', height: editCanvasConfig.height * editCanvas.scale * 2.5 + 'px' }" @mousedown="dragCanvas">
        <div ref="canvasRef" class="canvas-pane">
          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ck-sketch-ruler {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .scroll-canvas {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    overflow: auto;
    user-select: none;

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(144, 146, 152, 0.3);
      border-radius: 5px;
    }

    &::-webkit-scrollbar-corner {
      background-color: transparent;
    }
  }

  .real-canvas-container {
    position: absolute;
    top: 0;
    left: 0;

    &:hover {
      cursor: v-bind('cursorStyle')
    }
  }

  .canvas-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;

    &:active {
      cursor: crosshair;
    }
  }
}
</style>
